<script setup>
import { onMounted, toRefs, defineProps, reactive} from "vue";

const props = defineProps({
  reportData: {
    type: Object,
    default: () => ({}),
  },
  title: {
    type: String,
    default: '履约情况',
  },

  type: {
    type: String,
    default: '',
  },
});
const { title,type } = toRefs(props);

onMounted(() => {
  initData()
});

const reportInfo = reactive({
  monthRecruit: '',
  monthContract: '',
  monthHonourAgreement: '',
  yearRecruit: '',
  yearContract: '',
  yearHonourAgreement: ''
})
const initData = () => {
  Object.keys(props.reportData).forEach(key => {
    if (props.reportData[key] !== undefined) {
      reportInfo[key] = (props.reportData[key] / 100000000).toFixed(1) + '亿'
    } else {
      reportInfo[key] = '0亿'
    }
  })
}
</script>

<template>
    <div class="main-card grid-main-card ">
        <div class="card-title">
            <card-title :title="title"></card-title>
        </div>

        <div class="main-content">
            <div class="main-item">
                <div class="title">当月</div>
                <div class="item">
                    <div class="num" v-if="type == 'zc'">{{ reportInfo.monthRecruit || '--' }}</div>
                    <div class="num" v-if="type == 'ht'">{{ reportInfo.monthContract || '--' }}</div>
                    <div class="num" v-if="type == 'ly'">{{ reportInfo.monthHonourAgreement || '--' }}</div>
                </div>
            </div>

            <div class="main-item">
                <div class="title">{{ '全年累计' }}</div>
                <div class="item">
                    <div class="num" v-if="type == 'zc'">{{ reportInfo.yearRecruit || '--' }}</div>
                    <div class="num" v-if="type == 'ht'">{{ reportInfo.yearContract || '--' }}</div>
                    <div class="num" v-if="type == 'ly'">{{ reportInfo.yearHonourAgreement || '--' }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.main-card {
    width: 100%;
    height: 200px;
}
.main-content {
    display: flex;
}
.main-item {
    width: 100%;
    .title {
        width: 125px;
        height: 40px;
        line-height: 40px;
        font-weight: 700;
        text-align: center;
        background-color: var(--default-background-color);
        font-size: 16px;
        font-family: Source Han Sans CN;
        border-radius: 20px;
        margin: 40px auto 16px auto;
        color: #666;
    }
}
.item {
    color: #1B2A52;
    text-align: center;
    .num {
        font-weight: 600;
        font-size: 32px;
        font-family: DIN Black;
    }
    .num-tips {
        font-family: Source Han Sans CN;
        margin-top: 2px;
        font-size: 14px;
    }
}
</style>